<template>
  <div>
    <el-container>
      <el-header>
        <el-row type="flex" justify="space-between" align="middle">
          <el-row class="logo" type="flex" align="middle">
            <el-image :src="require('../assets/heima.png')" fit="fill"></el-image>
            <span class="title">污染源在线管控平台</span>
          </el-row>
          <el-dropdown>
            <span class="el-dropdown-link">
              管理员
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>修改密码</el-dropdown-item>
              <el-dropdown-item>退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-row>
      </el-header>
      <el-container>
        <el-aside width>
          <!-- <el-radio-group v-model="sideBar.isCollapse" style="margin-bottom: 20px;">
            <el-radio-button :label="false">展开</el-radio-button>
            <el-radio-button :label="true">收起</el-radio-button>
          </el-radio-group>-->
          <el-menu
            default-active="1-4-1"
            class="el-menu-vertical-demo"
            :collapse="sideBar.isCollapse"
            :router="true"
          >
            <el-menu-item @click="sideBar.isCollapse=!sideBar.isCollapse" class="collapse-menu">
              <i :class="[sideBar.isCollapse?'el-icon-d-arrow-right':'el-icon-d-arrow-left']"></i>
              <span v-text="sideBar.isCollapse?'展开':'收起'" slot="title"></span>
            </el-menu-item>
            <el-menu-item v-for="menu in menus" :key="menu.id" :index="menu.id" :route="menu.route">
              <i :class="menu.icon"></i>
              <span v-text="menu.title" slot="title"></span>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      sideBar: {
        isCollapse: false,
      },
      menus: [],
    }
  },
  methods: {
    async getMenu() {
      const { data: res } = await this.$http.get('menu/admin')
      console.log(res)
      if (res.code != this.$result.success) {
        this.$message(res.msg)
      }
      this.menus = res.data
    },
  },
  created() {
    this.getMenu()
  },
}
</script>

<style lang="less">
.el-header {
  background-color: #f2f6fc;
  color: #303133;
  font-size: 20px;
  .logo {
    > .title {
      margin-left: 15px;
    }
  }
}
.el-aside{
  .el-menu{
    height: 100%;
    .collapse-menu{
      background-color:#DCDFE6;
      color:#303133
    }
  }
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
</style>